<template>
  <view
    class="community_events_box"
    @touchmove="refresh.moveTouchendHandler"
    @touchstart="refresh.startTouchendHandler"
    @touchend="refresh.endTouchendHandler"
  >
    <!-- 导航栏 -->
    <menu-navigation-bar
      :menu-list="menuList"
      :is-sticky="true"
      @on-selected="onMenuChoose"
    />

    <!-- 主体内容 -->
    <view class="content">
      <view
        class="item"
        v-for="(item, index) in dataList.activity"
        :key="index"
        @click="toDetail(item.activityId)"
      >
        <time-range-bar
          :title="item.activityTitle"
          :time="`${item.startTime} - ${item.endTime}`"
          :status="item.activityState"
          :description="item.category.categoryMsg"
        />
      </view>
    </view>
    <!-- 加载状态 -->
    <load :status="loadStatue" :isImage="dataList.activity.length<1" />
  </view>

  <!-- 下拉刷新 -->
  <pull-down-refresh
    :opacity="refresh.moveBottom.value / 3"
    :enble-anim="refresh.isRefresh.value"
  />
</template>

<!-- 社区活动 -->
<script lang="ts" setup>
//下拉刷新控制函数
const refresh = refreshHandler(300)
import { refreshHandler } from '@/components/common/pull_down_refresh'
import { ReqSelectActivityByState } from '@/api/activity'
import timeRangeBar from '@/components/common/time_range_bar/time-range-bar.vue'
import menuNavigationBar from '@/components/layout/menu_navigation_bar/menu-navigation-bar.vue'
import type { PageByActivity, QueryPageByActivity } from '@/config/data/data'
import { onLoad, onPageScroll, onReachBottom } from '@dcloudio/uni-app'
import { ref, watch } from 'vue'
import { ActivitySateEnum } from '@/config/enum/enum'

///菜单导航栏
const menuList = ref<string[]>([])

//当前选中菜单
const onMenuChoose = (index: number) => {
  queryPage.value.state = menuList.value[index]
  dataList.value.activity = []
  queryPage.value.page = 0
  loadStatue.value = 0
  getData()
}

//数据列表
const dataList = ref<PageByActivity>({
  total: 0,
  activity: [],
})

//加载状态
const loadStatue = ref(1)
//加载状态文本
const contentText = {
  contentnomore: '没有更多数据了',
}

//防止重复请求
const isReq = ref(true)

//分页参数
const queryPage = ref<QueryPageByActivity>({
  page: 0,
  size: 15,
  state: -1,
})

/**
 * 下一页数据
 * @param 是否刷新
 * @returns 返回一个Promise 标识请求是否结束
 */
const getData = (refresh: boolean = false) => {
  return new Promise((reslove) => {
    if (!isReq.value || loadStatue.value == -1) {
      reslove(true)
      return
    }
    isReq.value = false
    loadStatue.value = 0
    queryPage.value.page += 1
    ReqSelectActivityByState(queryPage.value)
      .then((res) => {
        if (res.code == 200 && res.data) {
          refresh ? (dataList.value.activity = []) : ''
          dataList.value.total = res.data.total
          dataList.value.activity.push(...res.data.activity)
          loadStatue.value =
            res.data.total < dataList.value.activity.length ? 1 : -1
        }
      })
      .catch(() => {
        loadStatue.value = -2
        setTimeout(() => {
          loadStatue.value = -1
        }, 100)
      })
      .finally(() => {
        isReq.value = true
        reslove(true)
      })
  })
}

//监听下拉刷新状态
watch(
  () => refresh.isRefresh.value,
  (newValue, oldValue) => {
    if (newValue) {
      //开启刷新，并请求
      queryPage.value.page = 0
      getData(true).finally(() => {
        refresh.refreshEnd(500)
      })
    }
  }
)

//跳转详细
const toDetail = (id: number) => {
  uni.navigateTo({ url: `../../subpkg/activity/detail?id=${id}` })
}

//初始化数据列表
const initData = () => {
  menuList.value.push('全部活动') 
  for (let key in ActivitySateEnum) {
    if (ActivitySateEnum.hasOwnProperty(key)) {
      menuList.value.push(
        ActivitySateEnum[key as keyof typeof ActivitySateEnum]
      )
    }
  }

  getData()
}

//页面加载
onLoad(() => {
  initData()
})

//页面滑动到底部
onReachBottom(() => {
  getData()
})

//监听页面滚动
onPageScroll((e: any) => {
  //如果小于5则进行赋值,标识此时是否可进行下拉刷新
  if (e.scrollTop < 5) {
    refresh.rollDistance.value = parseInt(e.scrollTop)
  }
})
</script>

<style scoped lang="scss">
.community_events_box {
  width: 100%;
  min-height: 100vh;
  background-color: $uni-bg-color-grey;

  .content {
    padding: 0 30rpx;
    width: calc(100% - 60rpx);

    .item {
      width: calc(100% - 40rpx);
      padding: 30rpx 20rpx;
      background-color: $uni-bg-color;
      margin-bottom: 30rpx;
      border-radius: 10rpx;
      box-shadow: rgba(157, 154, 154, 0.16) 0px 1px 4px;
    }
  }
}
</style>
